<template>
  <view class="setting-container">
    <!-- 设置页面标题 -->
    <view class="header">
      <text class="title">设置</text>
    </view>

    <!-- 设置项列表 -->
    <view class="setting-list">
      <!-- 登出按钮 -->
      <view class="setting-item logout-item" @click="handleLogout">
        <view class="item-content">
          <uni-icons type="logout" size="20" color="#ff4757"></uni-icons>
          <text class="item-text logout-text">退出登录</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { UserService } from '@/services';

  // 处理登出
  const handleLogout = async () => {
    uni.showModal({
      title: '退出登录',
      content: '确定要退出登录吗？',
      success: async res => {
        if (res.confirm) {
          try {
            // 显示加载提示
            uni.showLoading({
              title: '退出中...',
              mask: true,
            });

            // 调用登出接口 - 新架构会自动处理存储清理和页面跳转
            await UserService.logout();
            // 隐藏加载提示
            uni.hideLoading();
          } catch (error) {
            console.error('登出失败:', error);

            // 隐藏加载提示
            uni.hideLoading();

            // 显示错误提示
            uni.showToast({
              title: '退出失败，请重试',
              icon: 'error',
              duration: 2000,
            });
          }
        }
      },
    });
  };
</script>

<style lang="scss" scoped>
  .setting-container {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .header {
    padding: 40rpx 32rpx 20rpx;
    background: white;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .setting-list {
    margin-top: 20rpx;
    background: white;
  }

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    cursor: pointer;

    &:active {
      background-color: #f8f8f8;
    }

    &:last-child {
      border-bottom: none;
    }

    .item-content {
      display: flex;
      align-items: center;
      gap: 24rpx;

      .item-text {
        font-size: 30rpx;
        color: #333;
      }
    }
  }

  .logout-item {
    .item-content {
      .logout-text {
        color: #ff4757;
        font-weight: 500;
      }
    }
  }
</style>
